<template>
  <div class="VipReg">
    <div class="VipReg-content wrap" style="margin:0;width:100%;">
      <div class="auditText" v-show="isUpdate">
        <div class="auditTitle">审核结果</div>
        <div>
          <div class="auditItem" v-for="(item,index) in declareAudit" :key="index">
            <div class="auditInfo">{{item.result}}：{{item.text}}</div>
            <div class="auditTime">{{item.createTime}}</div>
          </div>
        </div>
      </div>
      <div class="VipReg-content-form">
        <van-form @submit="onSubmit" label-align="right">
          <van-field
            v-model="form.name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '姓名不能为空' }]"
          />

          <!-- <van-field
            v-model="form.sex"
            label="性别"
            placeholder="请输入性别"
            :rules="[{ required: true, message: '性别不能为空' }]"
          />-->
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.sex"
            label="性别"
            placeholder="点击选择性别"
            @click="showSex = true"
            :rules="[{ required: true, message: '性别不能为空' }]"
          />
          <van-popup v-model="showSex" position="bottom">
            <van-picker show-toolbar :columns="columns" @confirm="onSex" @cancel="showSex = false" />
          </van-popup>

          <van-field
            v-model="form.spared1"
            label="民族"
            placeholder="请输入民族"
            :rules="[{ required: true, message: '民族不能为空' }]"
          />

          <van-field
            readonly
            clickable
            :value="form.birthday"
            label="出生年月"
            placeholder="点击选择出生年月"
            :rules="[{ required: true, message: '出生年月不能为空' }]"
            @click="showCalendar = true"
          />
          <van-popup v-model="showCalendar" position="bottom">
            <van-datetime-picker
              v-model="birthDate"
              type="date"
              title="出生年月"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="showCalendar=false"
              @confirm="onConfirm"
            />
          </van-popup>

          <!-- <van-field
            v-model="form.nativePlace"
            label="籍贯"
            placeholder="请输入籍贯"
            :rules="[{ required: true, message: '籍贯不能为空' }]"
          />-->
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.nativePlace"
            label="籍贯"
            placeholder="请选择籍贯"
            :rules="[{ required: true, message: '籍贯不能为空' }]"
            @click="showNativePlace = true"
          />
          <van-popup v-model="showNativePlace" position="bottom">
            <van-picker
              show-toolbar
              :columns="placeList"
              @confirm="onNativePlace"
              @cancel="showNativePlace = false"
            />
          </van-popup>

          <van-field
            readonly
            clickable
            name="picker"
            :value="form.politicalStatus"
            label="政治面貌"
            placeholder="点击选择政治面貌"
            @click="showPoli = true"
            :rules="[{ required: true, message: '政治面貌不能为空' }]"
          />
          <van-popup v-model="showPoli" position="bottom">
            <van-picker
              show-toolbar
              :columns="faceColumns"
              @confirm="onPoli"
              @cancel="showPoli = false"
            />
          </van-popup>

          <van-field
            readonly
            clickable
            name="picker"
            :value="form.educationalLevel"
            label="学历"
            placeholder="请选择学历"
            @click="showLevel = true"
            :rules="[{ required: true, message: '学历不能为空' }]"
          />
          <van-popup v-model="showLevel" position="bottom">
            <van-picker
              show-toolbar
              :columns="eduColumns"
              @confirm="onLevel"
              @cancel="showLevel = false"
            />
          </van-popup>

          <!-- <van-field
            v-model="form.educationalLevel"
            label="学历"
            placeholder="请输入学历"
            :rules="[{ required: true, message: '学历不能为空' }]"
          />-->

          <van-field
            v-model="form.jobTitle"
            label="职称"
            placeholder="请输入职称"
            :rules="[{ required: true, message: '职称不能为空' }]"
          />

          <van-field name="photo" label="照片">
            <template #input>
              <upload-image v-model="form.picture"></upload-image>
            </template>
          </van-field>

          <van-field
            v-model="form.workYear"
            label="从业年限"
            placeholder="请输入从业年限"
            :rules="[{ required: true, message: '从业年限不能为空' }]"
          />

          <van-field
            v-model="form.shoolName"
            label="毕业院校"
            placeholder="请输入毕业院校"
            :rules="[{ required: true, message: '毕业院校不能为空' }]"
          />

          <van-field
            v-model="form.professional"
            label="所学专业"
            placeholder="请输入所学专业"
            :rules="[{ required: true, message: '所学专业不能为空' }]"
          />

          <van-field
            v-model="form.idNumber"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '身份证号不能为空' }]"
          />

          <van-field
            v-model="form.emailQq"
            label="E-mail"
            placeholder="请输入E-mail"
            :rules="[{ required: true, message: 'E-mail不能为空' }]"
          />

          <van-field
            v-model="form.companyName"
            label="单位名称"
            placeholder="请输入单位名称"
            :rules="[{ required: true, message: '单位名称不能为空' }]"
          />

          <van-field
            v-model="form.position"
            label="单位职务"
            placeholder="请输入单位职务"
            :rules="[{ required: true, message: '单位职务不能为空' }]"
          />

          <van-field
            v-model="form.contactPhone"
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '联系电话不能为空' }]"
          />

          <van-field v-model="form.faxes" label="传真" placeholder="请输入传真" />

          <van-field
            v-model="form.principalPhone"
            label="手 机"
            placeholder="请输入手机"
            :rules="[{ required: true, message: '手机不能为空' }]"
          />

          <van-field v-model="form.postcode" label="邮编" placeholder="没有填写无" />

          <van-field
            v-model="form.companyAddress"
            label="通讯地址"
            placeholder="请输入通讯地址"
            :rules="[{ required: true, message: '通讯地址不能为空' }]"
          />

          <van-field name="workCategory" label="类别">
            <template #input>
              <van-checkbox-group v-model="form.applyCategory" max="2">
                <van-checkbox name="景观设计师">景观设计师</van-checkbox>
                <van-checkbox name="室内建筑师">室内建筑师</van-checkbox>
                <van-checkbox name="展览展示设计师">展览展示设计师</van-checkbox>
                <van-checkbox name="住宅室内设计师">住宅室内设计师</van-checkbox>
                <van-checkbox name="陈设艺术设计师">陈设艺术设计师</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>

          <van-field
            v-model="form.jobResume"
            type="textarea"
            label="工作简历"
            placeholder="请输入工作简历"
            :rules="[{ required: true, message: '工作简历不能为空' }]"
          />

          <van-field
            v-model="form.workPerformance"
            type="textarea"
            label="工作业绩"
            placeholder="请输入工作业绩"
          />
          <!-- <div class="VipReg-content-file">
            <span>附件下载</span>
            <a href="javascript:;">JGJ56251HGF6.PDF</a>
          </div>-->
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交审核</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import uploadImage from '@/components/upload/uploadImageOne'
export default {
  name: 'gerenhuiyuanweiyuan',
  components: {
    uploadImage,
  },
  props: {
    vipTypeId: {
      type: Number,
      default: 0,
    },
    tableName: {
      type: String,
      default: '',
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
    declareId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      declareAudit: [],
      form: {
        birthday: parseTime(new Date(), '{y}-{m}-{d}'),
      },
      username: '',
      sex: '1',
      showCalendar: false,
      birthDate: parseTime(new Date(), '{y}-{m}-{d}'),
      date: '',
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(),
      place: '', // 籍贯
      placeList: [
        '广东',
        '广西',
        '台湾',
        '香港',
        '湖北',
        '湖南',
        '河北',
        '河南',
        '安徽',
        '江苏',
        '山东',
        '浙江',
        '青海',
        '新疆',
        '福建',
        '内蒙古',
        '江西',
        '云南',
        '贵州',
        '陕西',
        '山西',
        '海南',
        '西藏',
        '重庆',
        '四川',
        '甘肃',
        '宁夏',
        '澳门',
      ], // 籍贯

      publicFace: '', // 政治面貌
      faceColumns: ['群众', '共青团员', '党员'],
      showPublicFace: false,
      edu: '', // 学历
      eduColumns: ['小学', '初中', '高中', '大专', '本科', '硕士'],
      showEdu: false,
      profession: '', // 职称
      photo: [{ url: '' }],
      workYears: '',
      school: '',
      study: '',
      cardID: '',
      email: '',
      companyName: '', // 单位名称
      companyWork: '',
      tel: '',
      fox: '',
      phone: '',
      location: '',
      abbreviation: '', // 邮编
      workCategory: '1',
      experience: '', // 工作简历
      workMark: '', // 工作业绩
      flag: false,
      showSex: false,
      showPoli: false,
      showLevel: false,
      showNativePlace: false,
      columns: ['男', '女'],
    }
  },
  mounted() {
    if (this.isUpdate) {
      this.findDeclareAudit()
      this.findDeclare()
    }
  },
  methods: {
    onSex(value) {
      this.form.sex = value
      this.showSex = false
    },
    onNativePlace(value) {
      this.form.nativePlace = value
      this.showNativePlace = false
    },
    onLevel(value) {
      this.form.educationalLevel = value
      this.showLevel = false
    },
    onPoli(value) {
      console.log(this.form.politicalStatus)
      this.form.politicalStatus = value
      this.showPoli = false
    },
    // 表单提交方法
    onSubmit() {
      console.log(this.form)
      if (this.isUpdate) {
        this.updateDeclare()
      } else {
        this.addDeclare()
      }
    },
    updateDeclare() {
      let param = JSON.parse(JSON.stringify(this.form))
      param.applyCategory = JSON.stringify(param.applyCategory)
      param.declareType = 2
      param.status = 0
      this.$request({
        url: '/award/updateAwardDeclare',
        method: 'post',
        data: param,
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.$router.replace({ path: '/vipAudit' })
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    addDeclare() {
      let param = JSON.parse(JSON.stringify(this.form))
      param.applyCategory = JSON.stringify(param.applyCategory)
      param.declareName = this.tableName
      param.declareType = 2
      param.vipTypeId = this.vipTypeId
      param.status = 0
      param.signature2 = this.tableName
      this.$request({
        url: '/award/addAwardDeclare',
        method: 'post',
        data: param,
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.$router.replace({ path: '/vipAudit' })
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    // 日历选择
    onConfirm() {
      this.form.birthday = `${this.birthDate.getFullYear()}-${
        this.birthDate.getMonth() + 1
      }-${this.birthDate.getDate()}`
      this.showCalendar = false
    },
    // 政治面貌选择
    confirmPublicFace(value) {
      this.publicFace = value
      this.showPublicFace = false
    },
    // 学历选择
    confirmEdu(value) {
      this.edu = value
      this.showEdu = false
    },
    findDeclareAudit() {
      this.$request({
        url: '/award/awardApprovalList',
        method: 'post',
        data: { declareId: this.declareId },
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.declareAudit = rsp.data
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findDeclare() {
      this.$request({
        url: '/award/selectOneAwardDeclare',
        method: 'post',
        data: { declareId: this.declareId },
      }).then((rsp) => {
        if (rsp.code === 200) {
          // rsp.data.signature1 = JSON.parse(rsp.data.signature1);
          // rsp.data.signature2 = JSON.parse(rsp.data.signature2);
          rsp.data.applyCategory = JSON.parse(rsp.data.applyCategory)
          this.form = rsp.data
          // this.tableName = this.form.declareName;
          // this.vipTypeId = this.form.vipTypeId;
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
}
</script>

<style lang='scss'>
@import '@/assets/css/base';

.VipReg {
  &-banner {
    // @include bgImg(100%, px2rem(186), '@/assets/img/vip/vip-reg-banner.png');
    text-align: center;
    & > p {
      color: #fffefe;
      font-size: px2rem(24);
      font-weight: bold;
      &.title {
        font-size: px2rem(30);
        font-weight: bold;
        margin-top: px2rem(60);
        margin-bottom: px2rem(22);
      }
    }
  }
  &-content {
    .auditText {
      display: flex;
      margin-top: px2rem(40);
      .auditTitle {
        font-size: px2rem(32);
        width: 26%;
        text-align: right;
        padding-right: px2rem(32);
      }
      .auditItem {
        margin-bottom: px2rem(20);
        .auditInfo {
          color: #000000;
          margin-bottom: px2rem(20);
          font-size: px2rem(32);
        }
        .auditTime {
          font-size: px2rem(28);
          color: #dcdee0;
        }
      }
    }
    &-info {
      margin-top: px2rem(83);
      margin-bottom: px2rem(40);
      & > p {
        color: #565656;
        font-size: px2rem(24);
        margin-bottom: px2rem(30);
        line-height: px2rem(38);
      }
    }
    &-file {
      font-size: px2rem(28);
      margin-top: px2rem(30);
      box-sizing: border-box;
      padding-left: px2rem(70);
      & > a {
        padding-left: px2rem(47);
        color: $mainColor;
        font-size: px2rem(28);
      }
    }
  }
}
</style>
